<template>
	<view>
		<uv-navbar title="3D" placeholder :autoBack="true"></uv-navbar>
		<canvas class="bracelet" style="width: 500px; height: 500px"></canvas>
	</view>
</template>

<script setup>
import { ref, onMounted, reactive, getCurrentInstance } from 'vue';
import { useStore } from 'vuex';
import { onReachBottom, onShow, onReady } from '@dcloudio/uni-app';
import { os, sys } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
const { ctx } = getCurrentInstance();
import Bracele3D from '@/common/utils/bracele/Bracele3D.js';
import Logger from '@/common/utils/bracele/Logger.js';
import * as THREE from 'three';
import { BraceleData } from '@/common/utils/bracele/BraceleData.js';
onShow(() => {
	Logger.enable();
	// ctx.$uv.getRect('.demo').then(res=>{
	// 		console.log(res)
	// 	})
	console.log(ctx, '-----=======');

	let bracele3D = new Bracele3D(
		ctx.$uv.getRect('.bracelet'),
		new BraceleData({
			circumference: Math.PI * 2,
			color: 0xffffff,
			path: 'http://localhost:5173/resources/coli/coli.gltf'
		}),
		{
			light: 'http://localhost:5173/resources/scene/light.exr',
			dark: 'http://localhost:5173/resources/scene/dark.exr'
		}
	);
	bracele3D.setDebug(true);
});
</script>
<style>
page {
	background: linear-gradient(180deg, #fff3f4 0%, #f6f6f6 27.12%);
}
</style>
<style lang="scss"></style>
